<template>
	<uni-popup ref="popup" type="bottom" :is-mask-click="false" background-color="#fff">
		<view class="header">
			<view class="header-title">充值</view>
			<uni-icons type="close" @click="close"></uni-icons>
		</view>
		<view class="body">
			<view class="body-item">
				<uni-easyinput  v-model="price" placeholder="充值金额" >
					<template v-slot:right>
						<view style="color: blue;">元</view>
					</template>
				</uni-easyinput>
				<text>{{gift_price}}福币</text>
				<view class="body-item-btn" @click="pay">充值</view>
			</view>
		</view>
		<uni-pay ref="uniPay" :to-success-page="false" @success="onSuccess"></uni-pay>
	</uni-popup>
</template>

<script>
	/**
	 * 送礼物组件
	 */
	import{ mapState,mapActions }from 'pinia'
	import{ useUserStore }from "@/pinia/user.js"
	const db = uniCloud.database();
	
	export default {
		name: "wolf-rechange",
		data() {
			return {
				price:null
			};
		},
		computed:{
			...mapState(useUserStore,['userInfo']),
			gift_price(){
				return this.price * 10 || 0
			}
		},
		methods:{
			...mapActions(useUserStore,['updateUserInfo']),
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			//去充值
			async pay() {
				if(!this.price){
					return uni.showToast({
						title:"请输入充值金额",
						icon:'none'
					})
				}
				let now = new Date().getTime() //获取当前时间戳
				let code = '' + (parseInt(Math.random() * 1000000) + 1000000)
				code = code.substring(1, 7)
				let order_no = "CZ" + code + now //业务订单号
				let price = this.price*100
				let obj = {
					order_no, //订单编号
					uid: this.userInfo._id, //购买人
					price,
					status: 0,
				}
				console.log('oRes', obj)
				// return
				let oRes = await db.collection('wolf-pay-order').add(obj)
				console.log('oRes', oRes)
				if (oRes.result.id) {
					let out_trade_no = `${order_no}x1`; // 生成插件支付单号
					let description = "充值"
					// 打开支付收银台
					let payRes = await this.$refs.uniPay.open({
						total_fee: price, // 支付金额，单位分 100 = 1元
						order_no: order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
						out_trade_no: out_trade_no, // 插件支付单号
						description, // 支付描述
						type: 'rechange', // 支付回调类型,充值
						custom: obj, // 自定义数据
					});
					console.log("payRes",payRes)
				}
				console.log("pay")
			},
			// 监听事件 - 支付成功
			onSuccess(res) {
				console.log('success: ', res);
				if (res.user_order_success) {
					// 代表用户已付款，且你自己写的回调成功并正确执行了
					uni.showToast({
						title: "充值成功",
						icon: "none"
					})
					this.updateUserInfo()
					this.close()
				} else {
			
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.header{
		display: flex;
		padding:10rpx 20rpx ;
		&-title{
			margin: auto;
		}
	}
	.tabber{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		padding: 10rpx 20rpx;
		&-gift{
			color: #c33864;
		}
		&-rechange{
			color: #fff;
			background-color: #FF5722;
			padding: 10rpx 20rpx;
			border-radius: 40rpx;
		}
	}
	.body{
		padding: 20rpx;
		display: flex;
		justify-content: center;
		min-height: 200px;
		&-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			border: 1px solid #fff;
			background-color: #5b5b5b;
			border-radius: 10rpx;
			padding-top: 10rpx;
			color: #fff;
			// width: 300rpx;
			font-size: 14px;
			height: 100px;
			
			&-btn{
				background-color: #c33864;
				width: 100%;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				padding: 10rpx 20rpx;
				text-align: center;
				box-sizing: border-box;
				margin-top: 10rpx;
			}
		}
	}
</style>